import React, { Component } from "react";
import { Card, List } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import LinkButton from '../../components/link-button'
import { BASE_IMG_URL} from '../../utils/constants'
import { reqCategory} from '../../api'

const Item = List.Item;
export default class ProductDetail extends Component {
  state = {
    cName1: '',
    cName2:''
  }
  async componentDidMount () { 
    const { pCategoryId, categoryId } = this.props.location.state.product
    console.log(pCategoryId);
    if ( pCategoryId == '0' ) {
      const res = await reqCategory( categoryId )
      console.log(res);
      const cName1 = res.data.data.name
      this.setState( {cName1})
    } else { 
      // const res1 = await reqCategory( pCategoryId )
      // const res2 = await reqCategory( categoryId )
      // const cName1 = res1.data.data.name
      // const cName2 = res2.data.data.name



      const res = await Promise.all([reqCategory( pCategoryId ),reqCategory( categoryId )])
      const cName1 = res[ 0 ].data.data.name
      const cName2 = res[ 1 ].data.data.name
      this.setState( {
        cName1,
        cName2
      })
    }
  }
  render () {
    const { name, desc, price, imgs, detail } = this.props.location.state.product
    console.log();
    const { cName1,cName2} = this.state 
    const title = (
      <span>
        <LinkButton>
          <ArrowLeftOutlined onClick={ ()=>this.props.history.goBack(-1)}/>
        </LinkButton>
        <span>商品详情</span>
      </span>
	  );
	  console.log(imgs);
    return (
      <Card title={title} className="product-detail">
        <List>
          <Item>
            <span className="left">商品名称:</span>
            <span className="right">{ name}</span>
          </Item>
          <Item>
            <span className="left">商品描述:</span>
            <span className="right">{ desc}</span>
          </Item>
          <Item>
            <span className="left">商品价格:</span>
            <span className="right">{ price}</span>
          </Item>
          <Item>
            <span className="left">所属分类:</span>
            <span className="right">{ cName1 }{cName2? '/'+cName2:''}</span>
          </Item>
          <Item>
            <span className="left">商品图片:</span>
            <span className="right">
              {
                JSON.parse(imgs).map( img => (
                  <img className="product-img" src={ BASE_IMG_URL+img} alt=""/>
                ))
              }
            </span>
          </Item>
          <Item>
            <span className="left">商品详情:</span>
              <span className="right" dangerouslySetInnerHTML={ {__html:detail}}>
            </span>
          </Item>
        </List>
      </Card>
    );
  }
}
